<script setup>

import {Tickets} from "@element-plus/icons-vue";
import useUserInfoStore from '@/stores/userinfo.js'
import {ref} from "vue";
const userInfoStore = useUserInfoStore();
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
</script>

<template>
  <el-card style="max-width: 480px; margin-bottom: 20px">
    <div class="user-info">
      <img class="avatar" :src="userInfoStore.info.userPic? userInfoStore.info.userPic:avatar" style="width: 80px;height:80px;border-radius: 20%;margin: 5px 35%" alt="">
      <div class="user-info-cont">
        <div class="user-name text-overflow" style="text-align: center;font-size: 20px;font-weight: bold">{{ userInfoStore.info.nickname }}</div>
        <div style="text-align: center;margin: 5px">{{ userInfoStore.info.username }}</div>
        <p style="overflow: hidden;height: 120px;font-size: 14px;letter-spacing: 2px;color: #8c939d;text-align: center">
          大家好啊！
        </p>
        <div style="display: flex;justify-content: center;margin-top: 15px">
          <span>
            <img src="@/assets/icon/Wechat.png" style="width: 40px;margin: 5px 20px">
          </span>
          <span>
            <img src="@/assets/icon/QQ.png" style="width: 68px;margin: 5px 0px 20px 17px">
          </span>
          <span>
            <img src="@/assets/icon/bilibili.png" style="width: 40px;margin: 5px 20px">
          </span>
        </div>
      </div>
    </div>
  </el-card>

  <el-card style="max-width: 480px; margin-bottom: 20px">
    <div style="font-size: 20px;font-weight: bold">分类</div>
    <p v-for="o in 4" :key="o" class="text item">
      <el-icon><Tickets /></el-icon>
      {{ '分类 ' + o }}
    </p>
  </el-card>

  <el-card style="max-width: 480px; margin-bottom: 20px">
    <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">标签</div>
    <div>
      <span v-for="o in 11" :key="o" class="text item" style="display: inline-block; margin: 5px">
        <el-tag>标签 {{ o }}</el-tag>
      </span>
    </div>
  </el-card>
</template>

<style scoped>

</style>
